<template>
  <!-- 登录页面 -->
  <div class="login">
    <!-- 毛玻璃多色彩背景 -->
    <div class="animated-bg" ref="animatedBg">
      <!-- 彩色圆形背景 -->
      <div class="color-orbs" ref="colorOrbs">
        <div class="color-orb" v-for="n in 8" :key="n" :data-index="n"></div>
      </div>
      <!-- 毛玻璃层 -->
      <div class="glass-overlay"></div>
    </div>

    <!-- 左侧内容 -->
    <div class="left-content">
      <!-- 左侧logo -->
      <div class="logo-container">
        <img src="@/assets/img/logo/logo-white.png" alt="Port AI" class="logo-img" />
      </div>
      <!-- 左侧logo文字 -->
      <div class="logo-text">
        <h1 class="title">港安 AI</h1>
        <h2 class="subtitle">港口安全智能助手</h2>
        <p class="description">
          <span>高效 · 准确 · 合规</span>
          <span>助力港口安全管理</span>
        </p>
      </div>
    </div>

    <!-- 登录容器 -->
    <div class="login-container" :class="{ 'is-register': state.registerContentFlag }">
      <!-- 原有内容保持不变，仅更改样式 -->
      <div class="container-inner">
        <!-- 注册表单 -->
        <div v-if="state.registerContentFlag" class="form-panel register-panel">
          <div class="panel-header">
            <h2>新用户注册</h2>
          </div>

          <el-form ref="registerForm" :model="registerFormData" :rules="registerRules" class="register-form">
            <el-form-item prop="username">
              <el-input v-model="registerFormData.username" placeholder="请输入手机号" prefix-icon="el-icon-mobile" />
            </el-form-item>

            <el-form-item prop="nickname">
              <el-input v-model="registerFormData.nickname" placeholder="请输入姓名" prefix-icon="el-icon-user" />
            </el-form-item>

            <el-form-item prop="company">
              <el-input v-model="registerFormData.company" placeholder="请输入公司名称" prefix-icon="el-icon-office-building" />
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="registerFormData.password" :type="state.registerPasswordType" placeholder="请输入密码" prefix-icon="el-icon-lock">
                <template #suffix>
                  <i class="el-icon-view" @click="showRegisterPassword"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="passwordConfirm">
              <el-input v-model="registerFormData.passwordConfirm" :type="state.confirmPasswordType" placeholder="请确认密码" prefix-icon="el-icon-lock">
                <template #suffix>
                  <i class="el-icon-view" @click="showConfirmPassword"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="code">
              <div class="code-input">
                <el-input v-model="registerFormData.code" placeholder="请输入验证码" prefix-icon="el-icon-key" />
                <el-button :disabled="!!state.timer || state.loading" @click="handleSendCode('register')">
                  {{ state.codeButtonText }}
                </el-button>
              </div>
            </el-form-item>
          </el-form>

          <div class="form-footer">
            <el-button type="primary" :loading="state.loading" @click="handleRegister">
              {{ state.loading ? '注册中...' : '注册' }}
            </el-button>
            <div class="footer-links">
              <span class="link" @click="state.registerContentFlag = false">返回登录</span>
              <span class="divider">|</span>
              <span class="link" @click="showSecurityAgreement('terms')">服务条款</span>
            </div>
          </div>
        </div>
        <!-- 登录表单面板 -->
        <div v-else class="form-panel login-panel">
          <div class="panel-header">
            <h2>{{ state.loginType === '1' ? '账号登录' : '手机登录' }}</h2>
            <div class="switch-type">
              <span :class="{ active: state.loginType === '1' }" @click="state.loginType = '1'">账号密码</span>
              <span :class="{ active: state.loginType === '2' }" @click="state.loginType = '2'">手机验证码</span>
            </div>
          </div>

          <!-- 账号密码登录 -->
          <el-form v-show="state.loginType === '1'" ref="loginForm" :model="loginFormData" :rules="loginRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="loginFormData.username" placeholder="请输入账号/手机号" prefix-icon="el-icon-user" />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input v-model="loginFormData.password" :type="state.passwordType" placeholder="请输入密码" prefix-icon="el-icon-lock">
                <template #suffix>
                  <i class="el-icon-view" @click="showPassword"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item v-if="state.captchaEnabled" prop="code">
              <div class="code-input">
                <el-input v-model="loginFormData.code" placeholder="验证码" prefix-icon="el-icon-key" />
                <img :src="state.codeUrl" @click="getCode" class="captcha-img" />
              </div>
            </el-form-item>

            <el-checkbox v-model="loginFormData.rememberMe">记住密码</el-checkbox>
          </el-form>

          <!-- 手机验证码登录 -->
          <el-form v-show="state.loginType === '2'" ref="phoneLoginForm" :model="phoneLoginFormData" :rules="phoneLoginRules" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="phoneLoginFormData.username" placeholder="请输入手机号" prefix-icon="el-icon-mobile" />
            </el-form-item>

            <el-form-item prop="code">
              <div class="code-input">
                <el-input v-model="phoneLoginFormData.code" placeholder="请输入验证码" prefix-icon="el-icon-key" />
                <el-button :disabled="!!state.timer || state.loading" @click="handleSendCode('login')">
                  {{ state.codeButtonText }}
                </el-button>
              </div>
            </el-form-item>

            <el-checkbox v-model="phoneLoginFormData.rememberMe">记住手机号</el-checkbox>
          </el-form>

          <div class="form-footer">
            <el-button type="primary" :loading="state.loading" @click="handleLogin">
              {{ state.loading ? '登录中...' : '登录' }}
            </el-button>
            <div class="footer-links">
              <span class="link" @click="state.registerContentFlag = true">注册账号</span>
              <span class="divider">|</span>
              <span class="link" @click="showSecurityAgreement('privacy')">隐私政策</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

// 路由相关
const router = useRouter()
const route = useRoute()
const redirect = ref(route.query?.redirect)

// store
const userStore = useUserStore()

// refs
const loginForm = ref()
const phoneLoginForm = ref()
const registerForm = ref()
const loginAgreement = ref()
const registerAgreement = ref()
const animatedBg = ref()
const colorOrbs = ref()

// 响应式数据
const state = reactive<any>({
  codeUrl: "",
  securityAgreement: false,
  loading: false,
  captchaEnabled: false,
  registerFlag: true,
  registerContentFlag: false,
  passwordType: "password",
  registerPasswordType: "password", 
  confirmPasswordType: "password",
  loginType: "1",
  timer: null,
  countdown: 60,
  codeButtonText: "获取验证码"
})

// 表单数据
const loginFormData = reactive({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: ""
})

const registerFormData = reactive({
  username: "",
  nickname: "",
  password: "",
  passwordConfirm: "",
  company: "",
  code: ""
})

const phoneLoginFormData = reactive({
  username: "",
  code: "",
  rememberMe: false
})

// 验证规则
const validateUsername = (rule: any, value: any, callback: any) => {
  const phoneReg = /^1[3-9]\d{9}$/
  if (!value) {
    callback(new Error("请输入手机号"))
  } else if (!phoneReg.test(value)) {
    callback(new Error("请输入正确的手机号格式"))
  } else {
    callback()
  }
}

const validateNickname = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请输入姓名"))
  } else if (value.length < 1) {
    callback(new Error("姓名长度不能少于1个字符"))
  } else {
    callback()
  }
}

const validatePassword = (rule: any, value: any, callback: any) => {
  const passwordReg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{8,}$/
  if (!value) {
    callback(new Error("请输入密码"))
  } else if (!passwordReg.test(value)) {
    callback(new Error("必须包含字母、数字和特殊字符(!@#$%^&*)，且长度不少于8位"))
  } else {
    if (registerFormData.passwordConfirm !== '') {
      registerForm.value.validateField("passwordConfirm")
    }
    callback()
  }
}

const validatePasswordConfirm = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请再次输入密码"))
  } else if (value !== registerFormData.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

const validatePhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请输入手机号"))
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的手机号格式"))
  } else {
    callback()
  }
}

// 表单验证规则
const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号/手机号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
}

const registerRules = {
  username: [{ required: true, trigger: "blur", validator: validateUsername }],
  nickname: [{ required: true, trigger: "blur", validator: validateNickname }],
  password: [{ required: true, trigger: "blur", validator: validatePassword }],
  passwordConfirm: [{ required: true, trigger: "blur", validator: validatePasswordConfirm }],
  code: [
    { required: true, trigger: "blur", message: "请输入验证码" },
    { min: 4, max: 4, message: "验证码长度为4位", trigger: "blur" }
  ]
}

const phoneLoginRules = {
  username: [{ required: true, trigger: "blur", validator: validatePhone }],
  code: [
    { required: true, trigger: "blur", message: "请输入验证码" },
    { min: 4, max: 4, message: "验证码长度为4位", trigger: "blur" }
  ]
}

// 监听路由变化
watch(() => route.query, (query) => {
  redirect.value = query?.redirect
}, { immediate: true })

// 毛玻璃背景动画变量
let animationFrameId: number | null = null
let colorHues: number[] = [210, 180, 240, 300, 330, 60, 120, 90] // 8种颜色的色相

// 生命周期钩子
onMounted(() => {
  if (state.captchaEnabled) {
    getCode()
  }
  getCookie()
  initGlassBackground()
})

onBeforeUnmount(() => {
  if (state.timer) {
    clearInterval(state.timer)
    state.timer = null
  }
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId)
    animationFrameId = null
  }
})

// 毛玻璃背景动画方法
const initGlassBackground = () => {
  if (!colorOrbs.value) return
  
  const orbs = colorOrbs.value.children
  for (let i = 0; i < orbs.length; i++) {
    const orb = orbs[i] as HTMLElement
    
    // 设置初始位置和颜色
    orb.style.left = Math.random() * 100 + '%'
    orb.style.top = Math.random() * 100 + '%'
    orb.style.background = `linear-gradient(45deg, 
      hsla(${colorHues[i]}, 80%, 60%, 0.8), 
      hsla(${(colorHues[i] + 30) % 360}, 70%, 70%, 0.6)
    )`
    
    // 设置随机动画延迟
    orb.style.animationDelay = (Math.random() * 10) + 's'
  }
  
  startColorAnimation()
}

const startColorAnimation = () => {
  let time = 0
  
  const animate = () => {
    time += 0.005
    
    if (colorOrbs.value) {
      const orbs = colorOrbs.value.children
      
      for (let i = 0; i < orbs.length; i++) {
        const orb = orbs[i] as HTMLElement
        
        // 动态改变颜色
        const baseHue = colorHues[i]
        const hue1 = (baseHue + Math.sin(time + i) * 60) % 360
        const hue2 = (baseHue + 30 + Math.cos(time + i) * 40) % 360
        
        // 动态改变透明度
        const opacity1 = 0.4 + Math.sin(time + i * 0.5) * 0.3
        const opacity2 = 0.3 + Math.cos(time + i * 0.3) * 0.2
        
        orb.style.background = `linear-gradient(${45 + Math.sin(time + i) * 90}deg, 
          hsla(${hue1}, 80%, 60%, ${opacity1}), 
          hsla(${hue2}, 70%, 70%, ${opacity2})
        )`
        
        // 动态改变位置（轻微移动）
        const moveX = Math.sin(time * 0.5 + i) * 3
        const moveY = Math.cos(time * 0.3 + i) * 2
        orb.style.transform = `translate(${moveX}px, ${moveY}px) scale(${1 + Math.sin(time + i) * 0.1})`
      }
    }
    
    animationFrameId = requestAnimationFrame(animate)
  }
  
  animate()
}

// 方法
const checkStatus = () => {
  state.registerContentFlag = !state.registerContentFlag
  if (state.registerContentFlag) {
    registerForm.value.resetFields()
  }
}

const getCode = async () => {
  // const res = await getCodeImg()
  // state.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
  // if (state.captchaEnabled) {
  //   state.codeUrl = "data:image/gif;base64," + res.img
  //   loginFormData.uuid = res.uuid
  // }
}

const getCookie = () => {
  const username = localStorage.getItem("portAi-username")
  const password = localStorage.getItem("portAi-password")
  const rememberMe = localStorage.getItem("portAi-rememberMe")
  const securityAgreement = localStorage.getItem("portAi-securityAgreement")
  
  loginFormData.username = username || loginFormData.username
  // loginFormData.password = password ? decrypt(password) : loginFormData.password
  loginFormData.password = password || loginFormData.password
  loginFormData.rememberMe = rememberMe ? Boolean(rememberMe) : false
  state.securityAgreement = securityAgreement ? Boolean(securityAgreement) : false

  const phone = localStorage.getItem("portAi-phone")
  const phoneRememberMe = localStorage.getItem("portAi-phone-rememberMe")
  phoneLoginFormData.username = phone || phoneLoginFormData.username
  phoneLoginFormData.code = ""
  phoneLoginFormData.rememberMe = phoneRememberMe ? Boolean(phoneRememberMe) : false
}

const handleLogin = () => {
  if (!state.securityAgreement) {
    loginAgreement.value.handleButtonClick()
    return
  }
  if (state.loginType === '1') {
    handleNormalLogin()
  } else {
    handlePhoneLogin()
  }
}

const handleNormalLogin = () => {
  loginForm.value.validate(async (valid: any) => {
    if (valid) {
      state.loading = true
      if (loginFormData.rememberMe) {
        localStorage.setItem("portAi-username", loginFormData.username)
        // localStorage.setItem("portAi-password", encrypt(loginFormData.password))
        // localStorage.setItem("portAi-rememberMe", loginFormData.rememberMe)
        // localStorage.setItem("portAi-securityAgreement", state.securityAgreement)
      } else {
        localStorage.removeItem("portAi-username")
        localStorage.removeItem("portAi-password")
        localStorage.removeItem("portAi-rememberMe")
        localStorage.removeItem("portAi-securityAgreement")
      }

      try {
        // await userStore.login({ type: 'normal', ...loginFormData })
        // router.push({ path: redirect.value || "/" })
      } catch {
        state.loading = false
        if (state.captchaEnabled) {
          getCode()
        }
      }
    }
  })
}

const handleRegister = () => {
  if (!state.securityAgreement) {
    registerAgreement.value.handleButtonClick()
    return
  }

  registerForm.value.validate(async (valid: any) => {
    if (valid) {
      if (registerFormData.password !== registerFormData.passwordConfirm) {
        ElMessage.error("两次输入的密码不一致")
        return
      }

      state.loading = true
      const uploadForm = {
        username: registerFormData.username,
        password: registerFormData.password,
        nickname: registerFormData.nickname,
        company: registerFormData.company === '' ? null : registerFormData.company,
        code: registerFormData.code
      }

      try {
        // const res = await register(uploadForm)
        const res: any = {}
        if (res.data.code === 200) {
          loginFormData.username = registerFormData.username
          loginFormData.password = registerFormData.password
          loginFormData.rememberMe = true
          ElMessage.success("注册成功")
          state.loginType = '1'
          handleLogin()
        } else {
          ElMessage.error(res.msg)
        }
      } catch (error: any) {
        ElMessage.error("注册失败, " + error.response.data.msg)
      } finally {
        state.loading = false
      }
    }
  })
}

const showPassword = () => {
  state.passwordType = state.passwordType === "password" ? "text" : "password"
}

const showRegisterPassword = () => {
  state.registerPasswordType = state.registerPasswordType === "password" ? "text" : "password"
}

const showConfirmPassword = () => {
  state.confirmPasswordType = state.confirmPasswordType === "password" ? "text" : "password"
}

const showSecurityAgreement = (title: string) => {
  window.open(`/static/passpc-account/${title}.html`, '_blank')
}

const handleSendCode = async (type: string) => {
  try {
    if (type === 'login') {
      await new Promise((resolve, reject) => {
        phoneLoginForm.value.validateField('username', (errorMsg: any) => {
          if (errorMsg) {
            reject(new Error(errorMsg))
          } else {
            resolve(true)
          }
        })
      })
    } else {
      await new Promise((resolve, reject) => {
        registerForm.value.validateField('username', (errorMsg: any) => {
          if (errorMsg) {
            reject(new Error(errorMsg))
          } else {
            resolve(true)
          }
        })
      })
    }

    state.countdown = 60
    state.codeButtonText = `${state.countdown}秒后重试`
    state.timer = setInterval(() => {
      if (state.countdown > 0) {
        state.countdown--
        state.codeButtonText = `${state.countdown}秒后重试`
      } else {
        clearInterval(state.timer)
        state.timer = null
        state.codeButtonText = "获取验证码"
      }
    }, 1000)

    const username = type === 'login' ? phoneLoginFormData.username : registerFormData.username
    // const res = await sendSmsCode({ username })
    const res: any = {}
    if (res.data.code === 200) {
      ElMessage.success("验证码发送成功")
    } else {
      ElMessage.error(res.msg || "验证码发送失败")
    }
  } catch (error: any) {
    ElMessage.error(error.message)
    return
  }
}

const handlePhoneLogin = () => {
  phoneLoginForm.value.validate(async (valid: any) => {
    if (valid) {
      state.loading = true
      if (phoneLoginFormData.rememberMe) {
        localStorage.setItem("portAi-phone", phoneLoginFormData.username)
        localStorage.setItem("portAi-phone-rememberMe", phoneLoginFormData.rememberMe.toString())
      } else {
        localStorage.removeItem("portAi-phone")
        localStorage.removeItem("portAi-phone-rememberMe")
      }

      try {
        // await userStore.login({ type: 'sms', ...phoneLoginFormData })
        // router.push({ path: redirect.value || "/" })
      } catch (error: any) {
        console.error(error)
        ElMessage.error(error.response?.data?.msg || error.response?.data?.detail || error.message || "登录失败")
      } finally {
        state.loading = false
      }
    }
  })
}
</script>

<style scoped lang="scss">
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5% 0 10%;
  background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
  position: relative;
  overflow: hidden;

  // 毛玻璃多色彩背景
  .animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.9), 
      rgba(240, 248, 255, 0.8),
      rgba(248, 250, 252, 0.85)
    );

    .color-orbs {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;

      .color-orb {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        opacity: 0.6;
        filter: blur(40px);
        animation: float-and-rotate 15s ease-in-out infinite;
        will-change: transform, filter;

        // 为每个圆设置不同的大小和动画
        &:nth-child(1) { 
          width: 400px; 
          height: 400px; 
          animation-duration: 20s; 
          filter: blur(60px);
        }
        &:nth-child(2) { 
          width: 250px; 
          height: 250px; 
          animation-duration: 18s; 
          animation-direction: reverse;
          filter: blur(35px);
        }
        &:nth-child(3) { 
          width: 350px; 
          height: 350px; 
          animation-duration: 25s; 
          filter: blur(50px);
        }
        &:nth-child(4) { 
          width: 200px; 
          height: 200px; 
          animation-duration: 16s; 
          animation-direction: reverse;
          filter: blur(30px);
        }
        &:nth-child(5) { 
          width: 320px; 
          height: 320px; 
          animation-duration: 22s; 
          filter: blur(45px);
        }
        &:nth-child(6) { 
          width: 280px; 
          height: 280px; 
          animation-duration: 19s; 
          animation-direction: reverse;
          filter: blur(40px);
        }
        &:nth-child(7) { 
          width: 180px; 
          height: 180px; 
          animation-duration: 14s; 
          filter: blur(25px);
        }
        &:nth-child(8) { 
          width: 360px; 
          height: 360px; 
          animation-duration: 26s; 
          animation-direction: reverse;
          filter: blur(55px);
        }
      }
    }

    .glass-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10px) saturate(1.8);
      -webkit-backdrop-filter: blur(10px) saturate(1.8);
      background: rgba(255, 255, 255, 0.1);
      background-image: 
        radial-gradient(circle at 20% 80%, rgba(15, 200, 175, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(45, 140, 240, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);
      z-index: 2;
    }
  }

  @keyframes float-and-rotate {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
      transform: translate(30px, -50px) rotate(90deg) scale(1.1);
    }
    50% {
      transform: translate(-20px, -30px) rotate(180deg) scale(0.9);
    }
    75% {
      transform: translate(-40px, 20px) rotate(270deg) scale(1.05);
    }
  }

  // 左侧内容样式
  .left-content {
    position: relative;
    z-index: 1;
    
    .logo-container {
      margin-bottom: 2rem;
      
      .logo-img {
        height: 150px;
        filter: drop-shadow(0 0 20px rgba(15, 200, 175, 0.2));
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .logo-text {
      color: #333;
      text-align: center;

      .title {
        font-size: 3.5rem;
        font-weight: 600;
                 background: linear-gradient(120deg, #0fc8af, #2d8cf0);
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
        margin-bottom: 1rem;
      }

      .subtitle {
        font-size: 2rem;
        color: #0fc8af;
        margin-bottom: 1.5rem;
      }

      .description {
        font-size: 1.2rem;
        line-height: 1.8;
        color: #666;
      }
    }
  }

  // 登录容器样式
  .login-container {
    position: relative;
    z-index: 1;
    width: 420px;
    min-height: 460px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 2px;

    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: -50%;
        top:-50%;
        background: linear-gradient(0deg,transparent,transparent,#5dc8ba,#38c2af,#0fc8af);
        z-index: 0;
        animation: animate 6s linear infinite;
        transform-origin: bottom right;
    }

    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: -50%;
        top:-50%;
        background: linear-gradient(0deg,transparent,transparent,#5dc8ba,#38c2af,#0fc8af);
        z-index: 0;
        animation: animate 6s linear infinite;
        transform-origin: bottom right;
        animation-delay: -3s;
    }

    @keyframes animate {
        from{
            transform: rotate(0deg);
        }

        to{
            transform: rotate(360deg);
        }
    }

    .container-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: #fff;
      border-radius: 8px;
      z-index: 1;
    }

    // &.is-register .container-inner {
    //   transform: translateX(-50%);
    // }

    .form-panel {
      width: 100%;
      padding: 2.5rem;

      .panel-header {
        text-align: center;
        margin-bottom: 2rem;

        h2 {
          color: #333;
          font-size: 1.8rem;
          margin-bottom: 1rem;
        }

        .switch-type {
          display: flex;
          justify-content: center;
          gap: 1.5rem;

          span {
            color: #666;
            cursor: pointer;
            padding: 0.5rem 0;
            position: relative;
            transition: all 0.3s ease;

            &.active {
              color: #0fc8af;

              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background: #0fc8af;
                transform: scaleX(1);
              }
            }

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background: #0fc8af;
              transform: scaleX(0);
              transition: transform 0.3s ease;
            }

            &:hover::after {
              transform: scaleX(1);
            }
          }
        }
      }

      :deep(.el-input) {
        --el-input-bg-color: rgba(255, 255, 255, 0.8);
        --el-input-border-color: #e4e7ed;
        --el-input-hover-border-color: #0fc8af;
        --el-input-focus-border-color: #0fc8af;
        --el-input-text-color: #333;
        --el-input-placeholder-color: #999;

        .el-input__wrapper {
          box-shadow: none;
          background: rgba(255, 255, 255, 0.8);
          border: 1px solid #e4e7ed;
          border-radius: 8px;
          padding: 0.8rem 1rem;
          height: 42px;

          &:hover {
            border-color: #0fc8af;
          }
        }

        .el-input__inner {
          height: 40px;
        }

        .el-input__prefix-icon {
          color: #999;
        }
      }

      .code-input {
        display: flex;
        gap: 1rem;

        .el-input {
          flex: 1;
        }

        .el-button, .captcha-img {
          width: 120px;
          height: 40px;
          border-radius: 8px;
        }

        .captcha-img {
          cursor: pointer;
          object-fit: cover;
        }
      }

      :deep(.el-checkbox) {
        --el-checkbox-text-color: #666;
        --el-checkbox-input-border-color: #dcdfe6;
        margin-bottom: 1.5rem;
      }

      .form-footer {
        text-align: center;

        .el-button {
          width: 100%;
          height: 44px;
          font-size: 1.1rem;
          border-radius: 8px;
          background: linear-gradient(120deg, #0fc8af, #2d8cf0);
          border: none;
          margin-bottom: 1rem;
          color: #fff;

          &:hover {
            opacity: 0.9;
          }
        }

        .footer-links {
          color: #666;
          font-size: 0.9rem;

          .link {
            cursor: pointer;
            transition: color 0.3s ease;

            &:hover {
              color: #0fc8af;
            }
          }

          .divider {
            margin: 0 0.8rem;
            color: #dcdfe6;
          }
        }
      }
    }
  }
}
</style>